Tutorial 1

Tutorial #1 - Strings, variables and fun!

The following tutorial will contain a few questions in bold italic. Please answer these questions in complete sentences and create a new Google Document shared with lkozloff@logoscambodia.org with the title "tutorial 1 - <your full name>". You may talk with one another and work together, but each person is responsible for turning in their own work in their own words. Part of this assignment is getting used to Google Docs. Please ensure that I have the ability to edit your document, as I will leave you comments. If you're not sure how to do this, please read the article about sharing on Google Docs Help

Review
Remember from our class discussion how we store variables. The general form is:

type variableName = value;

1. What 4 "types" have we discussed so far?
2. Give an example value for each type.

Setting and Retrieving Variables

If we're storing data inside the computer, obviously we want to get it out at some point. Right? For now, we're going to work inside the small box that usually shows errors. Later on in this tutorial, I'll explain how to make words and numbers appear on the screen in a more attractive way.

Are you ready?
Please enter the following code (between the lines) in a new processing document.

ex. 1

println("hello world!");

That's it, just the one line! Try running your program, and make sure you can see where the output is displayed. If you can't find it, ask a friend! You may have to make your processing window bigger.

Once you've figured that out, try the following code.

ex. 2

String greeting = "Salutations world!";
println(greeting);

Do you see the difference? In ex. 2 we're creating a variable called greeting, and then printing its contents to your screen. (In computers printing doesn't ALWAYS mean printing out on paper... in fact most of the time it means printing to the screen)

3. Look at the following code, what will the output be? (answer this question BEFORE you try it!)

ex. 3

String greeting = "Salutations world!";
greeting = "sup world?"; //look at this line for question 4.
greeting = "Howdy world!";
greeting = "Soursdey world!";
greeting = "Anyong world!";
greeting = "meh.";
println(greeting);

Was your answer right? Don't worry. I'll find out! (no cheating!!) As you can see, I created the variable greeting on the first line, and then set its value to different things in the following lines. That's what's great about variables! You can use the same name infinity times. It may be helpful to think of a variable as a box. You can put things in the box, take things out of the box, and put new things in the box. At the end of this program, the last thing that was in "the box" (greeting) is what is printed.

4. Why do I not use String after the first line? If I put String on line 2, what would happen?

Whenever you put the type before a variable name, you're telling the computer to create that variable. Without the type you're telling the computer to put something inside that variable.

Outputting data is pretty easy, right? println() is a very nice function. We won't go in to too much detail right now, but think of a function as a 'shortcut' that lets you do something easily. Functions aren't hard to use, but sometimes you have to be able to read the documentation. Look at the documentation for println()

The parameters section lists what kinds of things you can put in println.

5. In the documentation for println(), are all of the variable types that we know about so far listed in the parameters section?//

Built in Variables

Now that we've done some outputting and setting, let's take a look at some variables that processing provides for us.
Please try the following code:

ex. 4

void setup(){
   size(200,200);
}
void draw(){
   println(mouseX);
}

Move your mouse in the grey square that appears.

6. What is your program printing out? What happens as you move your mouse left to right in the main window?

Interesting, right? Processing provides us with several variables. We'll most often use:
int mouseX - the X location of the cursor in the main window
int mouseY - the Y location of the cursor in the main window
boolean mousePressed - whether the mouse button is pressed or not

What are these numbers good for? Excellent question! Let's make colors!

ex.5

void setup(){
   size(255,255);
}
void draw(){
   background(mouseX, mouseY, 0); //Hint: Red Green Blue
}

7. What does this program (ex.5) do? (Be specific by looking at the code. Don't say something like 'it makes colors, derp')
8. If you wanted the color X, where would you put your mouse? (Fill in the table, the first one has been done for you)

Color	Mouse Location
Black	Upper Left Corner
Red
Green
Yellow

If you've gotten this far, you're doing great! Take a 2 minute break before you continue!

Break over? Okay. Let's get to the good stuff. Printing stuff on the screen with colors and fonts. This section is copy/pasted from a larger tutorial found here

Displaying Text

Please note this section can be a bit tricky. Follow the directions very carefully. My comments are in italic.

1. Choose a font by selecting "Tools" --> "Create Font." This will create and place the font file in your data directory. Make note of the font filename for Step 3. Processing uses a special font format, "vlw," that uses images to display each letter. Because of this, you should create the font at the size you intend to display.

Mr. Kozloff suggests picking Arial, Size 12. It's up to you though.



2. Declare an object of type PFont.
You can do this outside of your setup() and draw() sections.

PFont f; //creates a variable named 'f', of type PFont (a new variable type.. that we'll only use for this one purpose)

3. Load the font by referencing the font file name and the function loadFont(). This should be done only once, usually in setup(). Just as with loading an image, the process of loading a font into memory is slow and would seriously affect the sketch's performance if placed inside draw().

Got that? NEVER put loadFont() into the draw() section of your program!!

f = loadFont("Serif-48.vlw"); //remember how you noted the file name you created in step 1? This is it! Put it here, in quotes!

4. Specify the font using textFont(). textFont() takes one or two arguments, the font variable and the font size, which is optional. If you do not include the font size, the font will be displayed at the size originally loaded. Specifying a font size that is different from the font size loaded can also result in pixelated or poor quality text.

textFont(f,36); //the number is optional textFont(f); will work just as well. You only need the number if you want a slightly different size.

5. Specify a color using fill().

fill(255); //What color is this?

6. Call the text() function to display text. (This function is just like shape or image drawing, it takes 3 arguments -- the text to be displayed, and the x & y coordinate to display that text.)

text("Hello Strings!",10,100); // places the text at (10,100)

Here are all the steps together. Please note that if you just copy and paste this code, it will not work. You must modify it per the instructions above.

PFont f; //STEP 2 Declare PFont variable
void setup() {
   size(200,200);
   f = loadFont("ArialMT-16.vlw");//STEP 3 Load Font
}
void draw() {
   background(255);
   textFont(f,16); //STEP 4 Specify font to be used
   fill(0);//STEP 5 Specify font color
   text("Hello Strings!",10,100); //STEP 6 Display Text
}

9. Using the above code as an example, make your own version - printing your own message in your own color! Include the code for Mr. Kozloff to see.
10. Do you have any questions? Please write them down.

Whew, excellent job! This concludes Tutorial 1. With what you know, you should be ready for Assignment #2 - Using Variables.

---